<template>
    <div style="width: 80vw">
        <div class="secomdcom">
            <el-table
                    :data="secomdcoms"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="商品编号">
                </el-table-column>
                <el-table-column
                        prop="com.name"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        prop="discount"
                        label="商品折扣">
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="商品库存">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="updsectocom(scope.row)" type="text">取消秒杀</el-button>
                        <el-button @click="updState(scope.row)" type="text">下架</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @current-change="toPage"
                        layout="prev, pager, next"
                        :total="currentPageCount"
                        :current-page="currentPageNo"
                        :page-size="6">
                </el-pagination>
            </div>

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <span>
                    <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="下架原因：">
                    <el-input type="textarea"
                              :rows="3"
                              v-model="sto.because"/>
                </el-form-item>
                        <!--<el-input v-model="sto.commodityname"></el-input>-->
            </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updSto()">确 定</el-button>
  </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Secomdcom",
        data() {
            return {
                dialogVisible: false,
                secomdcoms: [
                    {
                        id: '1',
                        discount: '8',
                        stock: '2233',
                        com: {
                            id: '1',
                            name: '2233'
                        }
                    },
                    {
                        id: '2',
                        discount: '8',
                        stock: '2233',
                        com: {
                            id: '1',
                            name: '2233'
                        }
                    }
                ],
                sto: {
                    storeid: '',
                    managerid: '',
                    commodityname: '',
                    stock: '',
                    because: ''
                },
                //当前的页码
                currentPageNo: 1,
                //最大页码
                currentPageCount: 1
            }
        },
        methods: {
            toPage: function (num) {
                this.currentPageNo = num;
                this.loadData();

            },
            loadData: function () {
                this.axios.get("/selectAllSec", {
                    params: {
                        pageNo: this.currentPageNo, pageSize: 6, storeid: 1, state: 1
                    }
                })
                    .then((response) => {
                        this.secomdcoms = response.data.data;
                        this.currentPageCount = response.data.pageCount;
                    })
            },
            updsectocom: function (row) {
                this.axios.get("/deleteSecById", {
                    params: {
                        id: row.id,
                        commodityid: row.com.id,
                        stock: row.stock,
                        storeid: 1
                    }
                })
                    .then((response) => {
                        if (response.data == 1) {
                            this.$message({
                                message: '更新成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('更新失败');
                        }
                    })
                this.loadData();
            },
            updState: function (row) {
                this.sto.commodityname = row.com.name;
                this.sto.stock = row.stock;
                this.dialogVisible = true
            },
            updSto: function () {
                this.axios.post("/updSto", this.sto)
                    .then((response) => {
                        if (response.data == 1) {
                            this.$message({
                                message: '更新成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('更新失败');
                        }
                    })

                this.dialogVisible = false;
                this.sto.because = null;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(response => {
                        done();
                        alert(response)
                    })
                    .catch(error => {
                        alert(error);
                    });
            }

        }, beforeRouteEnter(to, from, next) {
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadData();
            });

        }
    }
</script>

<style scoped>
    .secomdcom {
        margin: 50px 50px 50px 50px;
    }

    .el-input {
        width: 200px;
    }
</style>